import React,{Component} from 'react';
import {
    Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Icon,
  } from 'antd';
  import {connect} from 'dva'
  const { Option } = Select;

  class DrawerForm extends React.Component {
    state = { 
        visible: false ,
        name:'',
        w_name:'',
        sex:'',
        address:'',
        phone:'',
        age:18,
    };
  
    showDrawer = () => {
      this.setState({
        visible: true,
      });
    };
  
    onClose = () => {
      this.setState({
        visible: false,
      });
    };
    getFormData = ()=>{
        var payload ={
            name:this.state.name,
            w_name:this.state.w_name,
            sex:this.state.sex,
            address:this.state.address,
            phone:this.state.phone,
            age:parseInt(this.state.age),
            isuse:'1'
        }
        //console.log(payload);
        this.props.dispatch({type:'teacher/addNewTeacher',payload:payload});
    }
    getSelectData(e){
        this.setState({
            sex:e
        });
    }
    render() {
      const { getFieldDecorator } = this.props.form;
      return (
        <div>
          <Button type="primary" onClick={this.showDrawer}>
            <Icon type="plus" /> 添加讲师
          </Button>
          <Drawer
            title="ADD A NEW TEACHER"
            width={720}
            onClose={this.onClose}
            visible={this.state.visible}
            style={{
              overflow: 'auto',
              height: 'calc(100% - 108px)',
              paddingBottom: '108px',
            }}
          >
            <Form layout="vertical" hideRequiredMark>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="名字">
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: 'Please enter user name' }],
                    })(<Input placeholder="Please enter user name" onChange={e=>{this.setState({name:e.target.value})}}/>)}
                  </Form.Item>
                  
                </Col>
                <Col span={12}>
                <Form.Item label="昵称">
                    {getFieldDecorator('w_name', {
                      rules: [{ required: true, message: 'Please enter user w_name' }],
                    })(<Input placeholder="Please enter user name" onChange={e=>{this.setState({w_name:e.target.value})}}/>)}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="性别">
                    {getFieldDecorator('sex', {
                      rules: [{ required: true, message: 'Please select an sex' }],
                    })(
                      <Select placeholder="Please select an sex" id="sel" onChange={e=>{this.getSelectData(e)}}>
                        <Option value="男">男</Option>
                        <Option value="女">女</Option>
                      </Select>
                    )}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="地址">
                    {getFieldDecorator('address', {
                      rules: [{ required: true, message: 'Please choose the address' }],
                    })(
                        <Input placeholder="Please enter user address" onChange={e=>{this.setState({address:e.target.value})}}/>
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={12}>
                <Form.Item label="年龄">
                    {getFieldDecorator('age', {
                      rules: [{ required: true, message: 'Please enter the age' }],
                    })(
                        <Input placeholder="Please enter user age" onChange={e=>{this.setState({age:e.target.value})}}/>
                    )}
                  </Form.Item>
                </Col>
                <Col span={12}>
                <Form.Item label="电话">
                    {getFieldDecorator('phone', {
                      rules: [{ required: true, message: 'Please enter the phone' }],
                    })(
                        <Input placeholder="Please enter user phone" onChange={e=>{this.setState({phone:e.target.value})}}/>
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={24}>
                  <Form.Item label="Description">
                    {getFieldDecorator('description', {
                      rules: [
                        {
                          required: true,
                          message: 'please enter url description',
                        },
                      ],
                    })(<Input.TextArea rows={4} placeholder="please enter url description" />)}
                  </Form.Item>
                </Col>
              </Row>
            </Form>
            <div
              style={{
                position: 'absolute',
                left: 0,
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e9e9e9',
                padding: '10px 16px',
                background: '#fff',
                textAlign: 'right',
              }}
            >
              <Button onClick={this.onClose} style={{ marginRight: 8 }}>
                Cancel
              </Button>
              <Button onClick={()=>{this.getFormData()}} type="primary">
                Submit
              </Button>
            </div>
          </Drawer>
        </div>
      );
    }
  }
  
  const App = Form.create()(DrawerForm);
  const mapStateProps = (state)=>{
    return{
        
    }
}
export default connect(mapStateProps)(App);
  